<template>
    <div class="all5">
        <div class="title5">
            &nbsp;维修信息收集
        </div>

        <div class="container5">

            <el-form :model="taskForm" status-icon ref="taskForm" abel-width="100px" class="luo">
                <div class="kb5"></div>

                <el-form-item label="机组" class="m5" prop="shortage" label-width="120px">
                    <div class="block5">
                        <el-select v-model="taskForm.number" filterable placeholder="请选择">
                            <el-option v-for="item in machines" :key="item.machine" :label="item.machine"
                                :value="item.machine">
                            </el-option>
                        </el-select>
                    </div>
                </el-form-item>

                <div class="kb5"></div>

                <el-form-item label="登记时间" class="m5" prop="occure_time" label-width="122px" style="width:100%">
                    <div class="block5">
                        <el-date-picker type="date" placeholder="选择日期">
                        </el-date-picker>
                    </div>
                </el-form-item>

                <div class="kb5"></div>

                <el-form-item label="登记人" class="m5" prop="occure_time" label-width="100px" style="width:100%">
                    <div class="block5">
                        <el-input type="text" class="options" v-model="taskForm.person_record" autocomplete="off"
                            style="width:50%;"></el-input>
                    </div>
                </el-form-item>

                <div class="kb5"></div>


                <el-form-item label="故障概要" class="m5" prop="description" label-width="100px" style="width:100%;">
                    <div class="block5">
                        <el-input type="textarea" :rows="3" class="options" v-model="taskForm.description"
                            autocomplete="off" style="width:80%;"></el-input>
                    </div>
                </el-form-item>

                <div class="kb5"></div>

                <el-form-item label="维修概要" class="m5" prop="description" label-width="100px" style="width:100%;">
                    <div class="block5">
                        <el-input type="textarea" :rows="3" class="options" autocomplete="off"
                            style="width:80%;"></el-input>
                    </div>
                </el-form-item>
                <div class="kb5"></div>

                <el-form-item label="其他隐患" class="m5" prop="description" label-width="100px" style="width:100%;">
                    <div class="block5">
                        <el-input type="textarea" :rows="3" class="options" autocomplete="off"
                            style="width:80%;"></el-input>
                    </div>
                </el-form-item>

                <el-form-item class="bt5">

                    <el-button type="primary" @click="createTask()">提交</el-button>
                    <el-button>重置</el-button>
                </el-form-item>
                <div class="kb5"></div>
            </el-form>
        </div>
    </div>
</template>



<script>
import { createTask, getMachineList } from '@/api/table';


export default {

    mounted() {
        this.getMachineList();
    },


    methods: {
        handleClick(row) {
            console.log(row);
        },


        createTask() {
            createTask(this.taskForm).then(response => {
                this.taskForm.area = ''
                this.taskForm.number = ''
                this.taskForm.description = ''
                this.taskForm.person_record = ''

                this.$message({
                    message: '数据录入成功！',
                    type: 'success'
                });
            })
        },

        getMachineList() {
            getMachineList().then(response => {
                this.machines = response.data.results
            })
        }

    },

    data() {
        return {
            tableData: [],
            machines: [],
            taskForm: {
                number: '',
                description: '',
                person_record: '',
                person_finish: '未维修',
                is_fix: false
            },
            dialogFormVisible: false
        }
    }
}
</script>

<style >
.container5 {
    box-shadow: 0px 0px 8px #888888;
    background-color: rgb(255, 255, 255);
    margin-top: 4%;
    margin-left: 16%;
    width: 70%;
}

.kb5 {
    padding-top: 30px;
    background-color: rgba(95, 167, 209, 0);
}

.title5 {
    text-align: center;
    color: rgb(65, 66, 66);
    font-weight: bolder;
    font-size: 300%;
    font-family: "KaiTi";
    border-bottom: 1px solid rgb(80, 80, 80);
}

.bt5 {
    text-align: left;
    margin-left: 23%;

}

.block5 {
    text-align: left;
    margin-left: 10%;

}



.m5 .el-form-item__label {

    text-align: left;
    font-size: 17px;
}

.luo {
    padding-left: 23%;

}

.options {
    margin-left: 2.2vh;
    width: 20.5vh;
}

.all5 {
    background-color: rgb(243, 243, 243);
    background-size: cover;
    min-height: 94.8vh;
    padding-top: 2%;
}
</style>
